import React from 'react';

import './index.css';

/*
  学习目标：评论列表
  需求
    1：✅列表展示功能
    2. ✅发表评论功能
    3. ✅细节优化-非空、清除输入框
    4. ✅删除一条评论
    
    5. ✅清空评论功能

*/

export default class App extends React.Component {
  state = {
    // 用户名输入框
    username: '',
    // 评论内容
    content: '',

    // 1.1 声明状态
    list: [
      {
        id: 1,
        username: '思聪',
        content: '想你的夜',
      },
      {
        id: 2,
        username: '马芸',
        content: '我对钱不感兴趣',
      },
      {
        id: 3,
        username: '王简林',
        content: '实现一个小目标',
      },
    ],
  };

  handleChange = (e) => {
    const { name, value } = e.target;

    // 3.3 优化空字符串不允许保存到界面上
    this.setState({ [name]: value.trim() });
  };
  handleSubmit = (e) => {
    // 💥阻止默认行为
    e.preventDefault();

    // 2.3 新增数据到list中
    const { username, content, list } = this.state;

    // 3.1 非空判断
    if (!username.trim() || !content.trim()) {
      return;
    }

    const newList = {
      id: Date.now(),
      username,
      content,
    };
    // 3.2 清空输入框
    this.setState({ list: [newList, ...list], username: '', content: '' });

    // 不可变数据
    // ❌this.state.list.push(newList);
    // 新值覆盖旧值
  };

  handleDelById = (id) => {
    // 4.2 通过id删除一条数据
    const list = this.state.list.filter((item) => item.id !== id);
    this.setState({ list });
  };

  // 5.2 清空列表
  handleClear = () => {
    this.setState({ list: [] });
  };

  render() {
    // 👍 解构
    const { list, username, content } = this.state;
    return (
      <div className="app">
        {/* 表单提交的时候，运行发布评论的函数 */}
        <form>
          <input
            // 2.1.1 改造受控组价
            onChange={this.handleChange}
            value={username}
            // 🔔2.1.2 设置name，复用onChange事件
            name="username"
            className="user"
            type="text"
            placeholder="请输入评论人"
          />
          <br />
          <textarea
            // 2.1.1 改造受控组价
            onChange={this.handleChange}
            value={content}
            // 🔔2.1.2 设置name，复用onChange事件
            name="content"
            className="content"
            cols="30"
            rows="10"
            placeholder="请输入评论内容"
          />
          <br />
          {/* 2.2 绑定点击事件 */}
          <button onClick={this.handleSubmit}>发表评论</button>
          {/* 5.1 绑定事件 */}

          <button type="button" onClick={this.handleClear}>
            清空评论
          </button>
        </form>
        {/* 5.3 条件渲染 */}
        {list.length ? (
          <ul>
            {/* 1.2. 列表渲染 */}
            {list.map((item) => (
              <li key={item.id}>
                <h3>评论人: {item.username}</h3>
                <p>评论内容：{item.content}</p>
                {/* 4.1 绑定onClick事件, 记得传id */}
                <button onClick={() => this.handleDelById(item.id)}>删除</button>
              </li>
            ))}
          </ul>
        ) : (
          <div>暂无数据</div>
        )}
      </div>
    );
  }
}
